<template>
  <div class="filmFooter">
     <ul>
         <li>
             <router-link to="/film">
                 <i class="fa fa-film">
                     <p>电影</p>
                 </i>
             </router-link>
         </li>
         <li>
             <router-link to="/cinema">
                 <i class="fa fa-square">
                      <p>影院</p>
                 </i>   
             </router-link>
         </li>
         <li>
             <router-link to="/mine">
                <i class="fa fa-user-circle">
                     <p>我的</p>
                </i>
             </router-link>
         </li>
     </ul>
  </div>
</template>

<script>
export default {
    name:'film-footer'
}
</script>

<style scoped>
.filmFooter{
    position:fixed;
    bottom:0;
    width:100%;
    height:50px;
    line-height:50px;
    border-top:2px solid gray;
    background:#fff;
}
.filmFooter ul {
    display:flex;
    justify-content:space-around;
    margin-top:10px;
}
.filmFooter a{
    text-decoration:none;
}
.router-link-active{
    color:#e54847;
}
.filmFooter ul li i p{
    margin:5px 0 0 -7px;
}
</style>